<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    vm一拿到_data，就开始给自己加内容。把data的内容加入到vm
    （这样加入就是为了让编码更方便。可以直接写name，而不是_data.name）
    数据代理：
        vm.name <==> vm._data.name
        vm.address <==> vm._data.address
    基本原理：
        通过Object.defineProperty，将data对象中的所有属性添加到vm上
        为每个添加到vm的属性，指定一个getter/setter
    _data做了数据劫持。
    -->
    <div id="root">
        <h1>学校: {{name}}</h1>
        <h1>地址: {{_data.address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        let data = {
            name: "尚硅谷",
            address: "北京",
        }
        const vm = new Vue({
            data:data // vm._data=options.data（传入的配置data）=data（外部的）  其实这里data:data也可以直接写成data
        })
        vm.$mount("#root")
    </script>
</body>

</html>